<template>
  <div class='container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <div class="text item">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="subjectID" label="学科:">
            <el-select @change='subject' v-model="form.subjectID" placeholder="请选择" class="region">
              <el-option v-for="item in simpleArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="catalogID" label="目录:">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option v-for="(item,index) in directoryArr" :key="index" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="enterpriseID" label="企业:">
            <el-select v-model="form.enterpriseID" placeholder="请选择">
              <el-option v-for="item in enterpriseArr" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="province" label="城市:">
            <el-row>
              <el-col :span="4" class="city">
                <el-select @change='provinceVal' size="mini" class="select_INT" v-model="form.province" placeholder="请选择">
                  <el-option v-for="(item,index) in provincesArr" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col prop="city" :span="4">
                  <el-select size="mini" class="select_INT" v-model="form.city" placeholder="请选择">
                    <el-option v-for="(item,index) in cityArr" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item prop="direction" label="方向:">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option v-for="(item,index) in directionArr" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="questionType" label="题型:">
            <el-radio-group v-model="form.questionType">
              <el-radio label="1">单选</el-radio>
              <el-radio label="0">多选</el-radio>
              <el-radio label="2">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="difficulty" label="难度:">
            <el-radio-group v-model="form.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="question" label="题干:">
            <quillEditor v-model="form.question" class="quill-editor"></quillEditor>
          </el-form-item>
          <el-form-item label="选项:">
            <el-radio-group v-model="radio" @change="radioChange">
              <el-row :gutter="20" class="el_roe" v-for="(item,index) in form.options" :key="index">
                <el-col :span="20">
                  <div class="grid-content bg-purple">
                    <el-radio :label="item.code">
                      {{item.code}}:<el-input v-model="item.title"></el-input>
                    </el-radio>

                  </div>
                </el-col>
              </el-row>

            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-plus" type="danger" size="mini" disabled>增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="解析视频">
            <el-input class="video_url" v-model="form.videoURL"></el-input>
          </el-form-item>
          <el-form-item prop="answer" label="答案解析:">
            <quillEditor v-model="form.answer" class="quill-editor"></quillEditor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-row>
              <el-col :span='8'>
                <el-input class="text_area" type="textarea" width="20px" label-width="20px" v-model="form.remarks"></el-input>
              </el-col>
            </el-row>

          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select v-model="form.tags" placeholder="请选择试题标签">
              <el-option label="区域一" value="shanghai"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 学科简单列表
import { simple } from '@/api/hmmm/subjects.js'
// 二级目录列表
import { simple as _simple } from '@/api/hmmm/directorys.js'
// 企业
import { list } from '@/api/hmmm/companys.js'
// 城市列表
import { provinces, citys } from '@/api/hmmm/citys.js'
// 方向
import { direction } from '@/api/hmmm/constants.js'
// 题库添加
import { add, detail } from '@/api/hmmm/questions.js'
export default {
  components: {
    quillEditor
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (this.form.city === '') {
        callback(new Error('请选择城市'))
      } else {
        callback()
      }
    }
    return {
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: false
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: false
          }
        ], // 选项
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      radio: '',
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'change' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'change' }],
        enterpriseID: [{ type: 'date', required: true, message: '请选择企业', trigger: 'change' }],
        province: [{ required: true, message: '请选择城市', trigger: 'change' },
          { validator: validatePass, trigger: 'change' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }],
        question: [
          { required: true, message: '题干不能为空', trigger: 'blur' },
          { min: 1, message: '题干不能为空', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '答案不能为空', trigger: 'blur' },
          { min: 1, message: '题干不能为空', trigger: 'change' }
        ]
      },
      userName: {
        subjectName: ''
      },
      subjectID: '', // 搜素学科id
      simpleArr: [], // 学科列表
      directoryArr: [], // 目录列表
      enterpriseArr: [], // 企业列表,
      provincesArr: [], // 城市列表
      cityArr: [], // 地区
      directionArr: [] // 方向列表
    }
  },
  created () {
    this.simpleFn()
    // 企业列表
    this.listFn()
    // 城市
    this.provincesFn()
    // 放向
    this.directionFn()
    // 修改
    this.detailFn()
  },
  methods: {
    radioChange (val) {
      this.form.options.forEach(item => {
        item.isRight = item.code === val ? Boolean(true) : Boolean(false)
      })
    },
    onSubmit () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          await add(this.form)
          this.$message.success('修改成功')
          this.$router.push('/questions/list')
          this.form = {}
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 学科改变时事件
    subject (value) {
      this.directoryFn(value)
      // 学科改变的时候获取他的value做id参数
      this.subjectID = value
    },
    // 城市改变时事件
    provinceVal (val) {
      this.cityFn(val)
    },
    // 学科列表
    async simpleFn () {
      const res = await simple(this.userName)
      this.simpleArr = res.data
    },
    // 目录列表
    async directoryFn (value) {
      const res = await _simple({ subjectID: value })
      this.directoryArr = res.data
    },
    // 企业列表
    async listFn () {
      const res = await list()
      this.enterpriseArr = res.data.items
    },
    // 城市列表
    provincesFn () {
      this.provincesArr = provinces()
    },
    // 地区
    cityFn (val) {
      this.cityArr = citys(val)
      // console.log(this.cityArr)
    },
    // 方向列表
    directionFn () {
      this.directionArr = direction
    },

    async detailFn () {
      // console.log(this.$route.query)
      if (this.$route.query.id) {
        const res = await detail(this.$route.query)
        this.form = res.data
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.video_url {
  width: 400px;
}
.container {
  background-color: #fff;
  padding: 20px;
}
.city {
  margin-right: 5px;
}
.select_INT {
  width: 198px !important;
  margin-right: 5px;
}
.quill-editor {
  height: 200px;
  margin-bottom: 50px;
}
.el_roe {
  margin-bottom: 10px;
}
.el-select {
  width: 400px;
}
.text_area {
  margin-top: 20px;
}
</style>
